import React from 'react';
import _ from 'lodash';
import { menuConfig } from './config';
import menuConfigMap from '../../config/menuConfigMap';

const Menu = () => {
  const onDragStart = (e, item) => {
    e.dataTransfer.setData('Text', JSON.stringify(item));
  };
  return (
    <>
      <h1 style={{ textAlign: 'center' }}>组件列表</h1>
      <div className="menu-wrap">
        {_.map(menuConfig, (item, key) => {
          const Component = item.component ? menuConfigMap[item.component] : null;
          return (
            <div key={item.id} className="menu-item" draggable onDragStart={(e) => onDragStart(e, item)}>
              <div className="describe">{item.title}</div>
              {Component && <Component />}
            </div>
          );
        })}
      </div>
    </>
  );
};

export default Menu;
